<template>
  <div>
    <div style="display: flex; align-items: center;justify-content: space-between;">
      <div style="display: flex; align-items: center;">
        <img src="~/static/index/left@2x.png" alt="" style="width:56px;height:56px;object-fit: cover;" @click="goBack">
        <div v-for="(item, index) in types" :key="index" style="position: relative;margin-right:16px;height: 56px;line-height: 56px;text-align: center"
          :class="{ active: index == activeIndex }" @click="goheader(index)">
          <div>{{ item }}</div>
          <div v-if="index == activeIndex" class="xuanzhongdian"></div>
        </div>
      </div>
      <!-- <img src="~/static/index/rightshare.png" alt="" style="width:56px;height:56px" @click="goBack"> -->
    </div>
    <div style="margin:12px">
      <div style="display: flex; align-items: center;justify-content: space-between;" v-if="activeIndex == 0">
        <div style="display: flex; align-items: center;">
          <img :src="yinyuankang.icon" alt="" style="width:60px;height:60px;border-radius:12px;margin-right:8px">
          <div>
            <div style="font-size: 1;font-weight: bold;margin-bottom:4px;color: #2E3033;">{{ yinyuankang.name }}</div>
            <div style="display:flex;align-items:center;">
              <div v-for="(items, indexs) in yinyuankang.biaoqian" :key="indexs"
                style="font-size: 12px;color: #2E3033;font-weight: 500;margin-bottom:4px;margin-right:.25rem">{{ items }}
              </div>
            </div>
            <div><van-rate v-model="yinyuankang.point" :size="12" color="#FF7500FF" /></div>
          </div>
        </div>
        <div style="color:#FF7500;margin-left:12px;">
          <div style="font-size:13px;font-weight:bold;font-family: modeng;">77TOP</div>
          <div style="font-family: modeng;font-size:24px;">{{ yinyuankang.point }}</div>
        </div>
      </div>
      <div style="width:100%;height:1px;background:#EDEEF0;margin-top:8px;" v-if="activeIndex == 0"></div>
      <div v-if="activeIndex == 0">
        <div style="display: flex; align-items: center;justify-content: space-between;margin-top:22px;">
          <img src="~/static/index/_@2x.png" alt="" style="width:65px;height:32px">
          <div style="width: 0rem;height: 36px;border: 1px solid #E4E5E6;"></div>
          <div>
            <div style="font-weight: bold;font-size: 14px;color: #47494D;">{{ yinyuankang.size }}M</div>
            <div style="font-size: 12px;color: #7B7D80;font-weight: 500;">游戏大小</div>
          </div>
          <div style="width: 0rem;height: 36px;border: 1px solid #E4E5E6;"></div>
          <div>
            <div style="font-weight: bold;font-size: 14px;color: #47494D;">{{ yinyuankang.orderby }}</div>
            <div style="font-size: 12px;color: #7B7D80;font-weight: 500;">预约榜</div>
          </div>
          <div style="width: 0rem;height: 36px;border: 1px solid #E4E5E6;"></div>
          <div>
            <div style="font-weight: bold;font-size: 14px;color: #47494D;">{{ yinyuankang.number }}+</div>
            <div style="font-size: 12px;color: #7B7D80;font-weight: 500;">关注数</div>
          </div>
        </div>
        <div style="margin-top:30px;">
          <div style="font-weight: bold;font-size: 14px;color: #2E3033;">游戏图片/视频</div>
          <div style="position: relative;">
            <div>
              <div v-if="content.picture.avatar.length > 0 && agameIndex == 1" class="scroll-container" >
                  <div v-for="(item, index) in content.picture.avatar" :key="index"
                 class="scroll-item">
                  <video v-if="isVideo(item.path)" :src="item.path" :style="getImageStyle(content.picture.avatar_set)"
                    controls  autoplay></video>
                  <img v-else :src="item.path" alt="" :style="getImageStyle(content.picture.avatar_set)"
                    style="object-fit: cover;" @click.stop="showImage(item.path)" />
                </div>
              </div>
              <div v-if="content.picture.play.length > 0 && agameIndex == 0"  class="scroll-container" 
          @scroll="handleScroll"  
    ref="scrollContainer" 
        >
                <div v-for="(item, index) in content.picture.play" :key="index"  class="scroll-item"  >
                  <video v-if="isVideo(item.path)" :src="item.path" :style="getImageStyle(content.picture.play_set)"
                    controls  ref="videoPlayer"  
        ></video>
                  <img v-else :src="item.path" alt="" :style="getImageStyle(content.picture.play_set)"
                    style="object-fit: cover;" @click.stop="showImage(item.path)" />
                </div>
              </div>
              <div v-if="content.picture.imgs.length > 0 && agameIndex == 2"  class="scroll-container"  >
                  <div v-for="(item, index) in content.picture.imgs" :key="index"
                 class="scroll-item">
                  <video v-if="isVideo(item.path)" :src="item.path" :style="getImageStyle(content.picture.imgs_set)"
                    controls autoplay ></video>
                  <img v-else :src="item.path" alt="" :style="getImageStyle(content.picture.imgs_set)"
                    style="object-fit: cover;" @click.stop="showImage(item.path)" />
                </div>
              </div>
              <div
                style="position: absolute;bottom: 5px;left:0;display: flex;align-items: center;justify-content: center;width: 100%;z-index: 99;">
                <div class="xuanji" style="margin: 0 auto;">
                  <div v-for="(title, index) in filteredTitles" :key="index" class="weiz"
                    :class="{ gameactive: index == agameIndex }" @click="gameIndex(index)" v-if="title">
                    {{ title }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="font-weight: bold;font-size: 14px;color: #2E3033;" v-if="content.content">游戏简介</div>
          <div class="container">
            <div :class="['description', { 'show-more': isExpanded }]">
              <!-- {{content.content}} -->
              <div v-html="content.content"></div>
            </div>
            <div v-if="isTruncated" @click="toggleExpand" class="toggle-button">
              <div class="toggle-text">{{ isExpanded ? '点击收起全部简介' : '点击展开全部简介' }}</div>
              <img :src="isExpanded ? img2 : img1" alt="" class="toggle-icon">
            </div>
          </div>
          <div style="font-weight: bold;font-size: 14px;color: #2E3033;margin-top:1.25rem;" v-if="content.fuli">游戏福利
          </div>
          <div style="background: #FFFFFF;border-radius:12px;padding:12px 8px;margin-top:16px;" v-if="content.fuli">
            <div style="display:flex;align-items:center;font-size: 13px;font-weight: 500;color: #47494D;">
              <div style="margin-left:8px;">{{ content.fuli }}</div>
            </div>
          </div>
          <div style=" display: flex;align-content: center; justify-content: space-between; margin-top: .6875rem; ">
            <div style="color: #1a1a1aff; font-size: 0.875rem; font-weight: bold">
              大家都在玩
            </div>
            <!-- <img src="~/static/index/iconright.png" alt="" style="
                  width: 0.75rem;
                  height: 0.75rem;
                  margin-left: 0.25rem;
                  padding-top: 0.125rem;
                " /> -->
          </div>
          <div>
            <van-swipe :autoplay="3000" class="swipe-container" :width="300" >
                    <van-swipe-item v-for="(page, pageIndex) in paginatedItems" :key="pageIndex" class="swipe-item"
                        show-indicators="false">
                        <div class="row" v-for="(item, itemIndex) in page" :key="itemIndex"
                            @click="gofile(item.id)">
                            <img :src="item.icon" alt="" class="item-icon" />
                            <div class="item-content">
                                <div class="item-name">{{ item.name }}</div>
                                <div class="item-tags">
                                    <div v-for="(tag, tagIndex) in item.biaoqian" :key="tagIndex" class="item-tag">
                                        {{ tag }}
                                    </div>
                                </div>
                                <div class="item-point">
                                    <img src="~/static/index/mixed.png" alt="" class="point-icon" style="margin-right: 0;" />
                                    <div class="point-value">{{ item.point }}</div>
                                </div>
                            </div>
                        </div>
                    </van-swipe-item>
                </van-swipe>
          </div>
          <div style="font-weight: bold;font-size: 14px;color: #2E3033;margin-top:20px;"
            v-if="content.yx_news.length > 0">游戏资讯
          </div>
          <div>
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="(item, index) in content.yx_news" :key="index" @click="goitemlist(item.id)"
              class="vans-cell">
              <div class="zixun-cell">
                <div style="width:120px">
                  <img :src="item.image" alt="" style="width:7.5rem;height:3.875rem;border-radius:.5rem;">
                </div>

                <div style="margin-left:.75rem;flex:1">
                  <div style="display: flex;align-items: flex-start;">
                    <div style="width: 20px;height: 20px;flex-shrink: 0;" v-if="item.is_top == 1">
                      <img src="~/static/zixun/hot@2x.png" alt=""
                        style="width: 100%;height: 100%;object-fit: cover;flex-shrink: 0;">
                    </div>
                    <div class="truncate" style="margin-left: 3px;">
                      {{ truncatedText(item.title) }}
                    </div>
                  </div>
                  <div
                    style="display: flex;align-items: center;justify-content: space-between;padding:0 5px 0 0;width:100%">
                    <div style="color: #AEB0B3;font-size: .5625rem;">{{ item.time_format }}</div>
                    <div style="display: flex;align-items: center;">
                      <div style="display: flex;align-items: center;">
                        <img src="~/static/zixun/basic1.png" alt="" style="width:.75rem;height:.75rem">
                        <div style="color: #AEB0B3;font-weight: 500;font-size: .6875rem;">{{ item.look==0 ? '':item.look }}&nbsp;浏览</div>
                      </div>
                      <div style="margin:0, 0 .3135rem;font-weight: 500;color: #AEB0B3">·</div>
                      <div style="display: flex;align-items: center;">
                        <img src="~/static/zixun/basic2.png" alt="" style="width:.75rem;height:.75rem">
                        <div style="color: #AEB0B3;font-weight: 500;font-size: .6875rem;">{{ item.pinglun ==0 ? '':item.pinglun }}&nbsp;评论</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </van-cell>
          </van-list>
          </div>
        </div>
      </div>
      <div v-if="activeIndex == 1">
        <div v-if="pinglunlist.data.length == 0" style="display: flex;">
          <div
            style="margin:50%  auto;display: flex;flex-direction: column;align-items: center;justify-content: center;">
            <img src="https://static-tool.77.top/static/null-image.png" alt="" style="width:180px;height:180px;">
            <div style="color: #2E3033;font-weight: bold;margin-top: 15px;">你尚未发布任何评论哟~</div>
          </div>
        </div>
        <van-list v-model="loading" :finished="finished" finished-text="" @load="onLoad2"
          v-if="pinglunlist.data.length > 0">
          <van-cell v-for="(item, index) in pinglunlist.data" :key="index"
            style="margin:12px 0;background:#FFFFFF;border-radius:12px;padding:12px 8px;">
            <div style="display:flex;font-size: 13px;font-weight: 500;color: #47494D;">
              <img :src="item.touxiang" alt="" style="width:2.8125rem;height:2.8125rem;border-radius:.75rem">
              <div style="margin-left:.5rem;">
                <div style="    color: rgba(136, 136, 136, 1);font-size:.875rem;font-weight: 500;">{{ item.user_name }}
                </div>
                <div style="color:rgba(204, 204, 204, 1);    font-size: .625rem;">{{ item.timetran }}</div>
                <div style="    letter-spacing: .0625rem;    font-size: .875rem;margin-top: .5rem;">{{ item.content }}
                </div>
              </div>
            </div>

            <div style="display:flex;align-items:center;justify-content:space-between;">
              <div style="width:80%"></div>
              <!-- <div style="display:flex;align-items:center;flex:1">
                    <div style="display:flex;align-items:center;" @click.stop="zan(item.id)">
                    <img src="http://beta.um.77.top/static/zan.png" alt="" style="widht:1rem;height:1rem">
                    <div style="    color: #CCCCCC;    font-size: .75rem;margin-left: .4rem;">{{item.zan}}
                    </div>
                </div>
                <div style="display:flex;align-items:center;margin-left:1.25rem;">
                    <img src="http://beta.um.77.top/static/cai.png" alt="" style="widht:1rem;height:1rem">
                    <div style="color: #CCCCCC;font-size: .75rem;margin-left: .4rem;">{{item.cai}}
                    </div>
                </div>
                </div> -->

            </div>
          </van-cell>
        </van-list>
      </div>
      <div v-if="activeIndex == 2">
        <div v-if="youxikaifu.data == null || youxikaifu.data.length == 0" style="display: flex;">
          <div
            style="margin:50%  auto;display: flex;flex-direction: column;align-items: center;justify-content: center;">
            <img src="https://static-tool.77.top/static/null-image.png" alt="" style="width:180px;height:180px;">
            <div style="color: #2E3033;font-weight: bold;margin-top: 15px;">暂无开服消息哦~</div>
          </div>
        </div>
        <van-list v-model="loading" :finished="finished" finished-text="" @load="onLoad3">
          <van-cell v-for="(item, index) in youxikaifu.data" :key="index" style="margin:12px 0;background:none;">
            <div class="taltas">
              <div style="display:flex;align-items:center;font-size: .875rem;font-weight: 500;color: #47494D;">
                <div>{{ item.time1 }}</div>
                <div style="margin-left:1.25rem;">{{ item.time2 }}</div>
              </div>
              <div>{{ item.type }}</div>
            </div>
          </van-cell>
        </van-list>
      </div>
      <div v-if="activeIndex == 4">
        <div>
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="(item, index) in content.yx_news" :key="index" @click="goitemlist(item.id)"
              style="margin-top:.75rem;">
              <div class="zixun-cell">
                <img :src="item.image" alt="" style="width:120px;height:62px;border-radius:8px;">
                <div style="margin-left:12px;padding-top:4px;">
                  <div class="truncate" style="width:200px;padding-right:6px;">
                    {{ item.title }}
                  </div>
                  <div
                    style="display: flex;align-items: center;margin-top:6px;justify-content: space-between;padding-right:43px;">
                    <div style="color: #AEB0B3;font-size: 9px;">{{ item.time_format }}</div>
                    <div style="display: flex;align-items: center;">
                      <div style="display: flex;align-items: center;">
                        <img src="~/static/zixun/basic1.png" alt="" style="width:12px;height:12px">
                        <div style="color: #AEB0B3;font-weight: 500;font-size: .5625rem;">{{ item.look }}&nbsp;浏览</div>
                      </div>
                      <div style="color: #AEB0B3">&nbsp;&nbsp;·&nbsp;&nbsp;</div>
                      <div style="display: flex;align-items: center;">
                        <img src="~/static/zixun/basic2.png" alt="" style="width:12px;height:12px">
                        <div style="color: #AEB0B3;font-weight: 500;font-size: .5625rem;">{{ item.pinglun }}&nbsp;评论</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </van-cell>
          </van-list>
        </div>
      </div>
    </div>
    <div class="gameindexfooter" v-if="activeIndex == 0">
      <div class="xiazaiyouxi" @click="goxiazai()">下载游戏</div>
      <!-- <div class="xiazaiyouxi" @click="goyuyue()" v-if="type==1">{{yuyue}}</div> -->
      <div
        style="display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;margin-left:1.625rem"
        @click="pinglunshow = true">
        <img v-if="pinglntype" src="~/static/zixun/pingln2.png" alt="" style="width:1.5rem;height:1.5rem">
        <img v-if="pinglntype == false" src="~/static/zixun/pingln.png" alt="" style="width:1.5rem;height:1.5rem">
        <div style="font-size: .625rem;font-weight: 500;margin-top:.1875rem">评论</div>
      </div>
      <div
        style="display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;margin-left:1.175rem"
        @click="goshoucang()">
        <img v-if="shoucangtype" src="~/static/index/basicic.png" alt="" style="width:1.5rem;height:1.5rem">
        <img v-if="shoucangtype == false" src="~/static/zixun/shoucang1.png" alt="" style="width:1.5rem;height:1.5rem">
        <div style="font-size: .625rem;font-weight: 500;margin-top:.1875rem">关注</div>
      </div>
    </div>
    <van-popup v-model="pinglunshow" position="bottom" class="pinluntanchaung" style="" >
      <van-field v-model="pinglunmessage" rows="2" autosize type="textarea" maxlength="50" placeholder="请输入评论内容"
        show-word-limit style="background: #f7f7f7;border-radius:.75rem;margin:.75rem;width: 90%;height: 40%;" />
      <ul style="    color: rgba(136, 136, 136, 1);width:90%">
        <li>1.点评内容必须原创，严禁抄袭;</li>
        <li>2.真实表达，文明吐槽，有理有据;</li>
        <li>3.理性表达个人意见，不偏激,不偏见; </li>
        <li>4.在事实依据的基础上对游戏进行点评，客观公正; </li>
        <li>5.观点独特有趣，可读性强;</li>
        <li>6.逻辑清晰，语言简练</li>
      </ul>
      <div class="tijiao" @click="gotijiaopinglun">提交评论</div>
    </van-popup>
  </div>
</template>

<script>
import md5 from 'js-md5';
import { nextTick } from 'vue';
import img1 from '~/static/index/frame.png';
import img2 from '~/static/index/frame2.png';

export default {
  async asyncData({ params, $axios, route }) {
    const path = route.path;
    const id = path.split('/')[2].split('.')[0]; // 解析 e 的值

    // 定义两个请求的参数
    // const queryParams1 = {
    //   ct: 'app2021',
    //   ac: 'gameinfo_top',
    //   id: cleanedId,
    // };

    const queryParams2 = {
      ct: 'app2021',
      ac: 'gameinfo_content',
      id: id,
    };
    const queryParams3 = {
      ct: 'app2021',
      ac: 'gameinfo_pllist',
      id: id,
      p: 1
    };
    const queryParams4 = {
      ct: 'app',
      ac: 'game_info2',
      id: id,
      p: 1
    };
    const [response2, response3, response4] = await Promise.all([
      // $axios.get('', { params: queryParams1 }),
      $axios.get('', { params: queryParams2 }),
      $axios.get('', { params: queryParams3 }),
      $axios.get('', { params: queryParams4 })
    ]);
    return { id: id, content: response2.data, pinglunlist: response3.data, youxikaifu: response4.data };
  },
  head() {
    return {
      title: this.content?.seos.title, // 动态标题
      meta: [
        { hid: 'description', name: 'description', content: this.content?.seos.description }, // 描述
        { hid: 'keywords', name: 'keywords', content: this.content?.seos.keywords } // 关键词
      ]
    }
  },
  data() {
    return {
      types: ['游戏', "评论"],
      activeIndex: 0,
      value: 3,
      id: '',
      uid: '',
      isExpanded: false,
      isTruncated: false,
      img1: img1,
      yinyuankang: '',
      page: 1,
      page2: 1,
      page3: 1,
      t: '',
      textToHash: '',
      img2: img2,
      loading: false,
      finished: false,
      listid: '',
      pinglntype: true,
      shoucangtype: true,
      ims: [],
      pinglunlist: '',
      youxikaifu: '',
      pinglunshow: false,
      pinglunmessage: '',
      yuyue: '预约',
      type: '',
      gameindextitle: ["真机试玩","宣传片",  "图集"],
      agameIndex: ''
    }
  },
  async mounted() {
    const currentPath = this.$route.path;
    const id = currentPath.split('/')[2].split('.')[0]; // 解析 e 的值
    if (this.$route.query.uid == null || this.$route.query.uid == undefined) {
      this.uid = this.getCookie('loginnew');
    } else {
      this.uid = this.$route.query.uid
    }
    this.t = Date.now();
    const sign = `${this.uid}${this.t}fsd213ewdsadqwe2121213edsad`;
    this.textToHash = md5(sign);
    const params = {
      ct: 'app2021',
      ac: 'gameinfo_top',
      id: id,
      t: this.t,
      uid: this.uid,
      sign: this.textToHash
    };
    const response = await this.$axios.get('', { params });
    if (response.data.shoucang == 1) {
      this.shoucangtype = false
    }
    this.yinyuankang = response.data
    const titles = this.filteredTitles;
    if (titles.length > 0) {
      // 根据有数据的类型设置 agameIndex
      if (this.content.picture.play.length > 0) {
        this.agameIndex =0;
      } else if (this.content.picture.avatar.length > 0) {
        this.agameIndex = 1;
      } else if (this.content.picture.imgs.length > 0) {
        this.agameIndex = 2;
      }
    }
    this.checkOverflow();
    window.addEventListener('resize', this.checkOverflow);
    this.pinglunlist22()

  },
  beforeDestroy() {
    // windowNaNpxoveEventListener('resize', this.checkOverflow);
  },
  computed: {
    filteredTitles() {
      const titles = [];
      if (this.content.picture.play.length > 0) { titles[0] = this.gameindextitle[0]; }
      if (this.content.picture.avatar.length > 0) { titles[1] = this.gameindextitle[1]; }
      if (this.content.picture.imgs.length > 0) { titles[2] = this.gameindextitle[2]; }
      return titles;
    },
    paginatedItems() {
      const itemsPerPage = 3;
      let pages = [];

      // 获取数据
      const data = this.content?.game_yqw || [];

      for (let i = 0; i < data.length; i += itemsPerPage) {
        pages.push(data.slice(i, i + itemsPerPage));
      }
      return pages;
    },
  },
  methods: {
     truncatedText(e) {
      const maxLength = 20; // Maximum number of characters
      return e.length > maxLength
        ? e.slice(0, maxLength) + '...'
        : e;
    },
    handleScroll() {  
  
    },
    
    gofile(e) {
      this.$router.push({
        path: `/shouyou/${e}.html`,
      });
    },
    getImageStyle(avatarSet) {
      if (this.content.picture.play.length == 1 || this.content.picture.imgs.length == 1 || this.content.picture.avatar.length == 1) {
        avatarSet =3
      }
      console.log(avatarSet,'哈哈的hi很正常选择性出现在')
      if (avatarSet == 1) {
        // 竖图
        return {
          width: '197px',
          height: '351px',
          objectFit: 'cover',
          borderRadius: '12px'
        };
      } else if (avatarSet == 2) {
        // 横图
        return {
          width: '93VW',
          height: '197px',
          objectFit: 'cover',
          borderRadius: '12px',
        };
      }else if (avatarSet == 3) {
        // 横图
        return {
          width: '93VW',
          height: '351px',
          objectFit: 'cover',
          borderRadius: '12px',
        };
      }
      return {};
    },
    isVideo(path) {
      return path.endsWith('.mp4') || path.endsWith('.webm') || path.endsWith('.mov')
    },
    gameIndex(index) {

      this.agameIndex = index
    },
    goyuyue() {
      const params = {
        ct: 'app',
        ac: 'yuyue_add',
        id: this.id,
        t: this.t,
        uid: this.uid,
        sign: this.textToHash
      };
      this.$axios.get('api/app/v3', { params }).then(response => {
        if (response.data.message == '请勿重复添加') {
          this.yuyue = '预约成功'
        }
        alert(response.data.message);
      })
    },
    goxiazai() {
      window.location.href = `${this.$domain}/?ct=shouyou&ac=h5&gid=${this.id}&member=2`;
    },
    async goshoucang() {
      const params = {
        ct: 'app',
        ac: 'shoucang_add',
        id: this.id,
        t: this.t,
        uid: this.uid,
        sign: this.textToHash
      };
      const response = await this.$axios.get('', { params });
      if (response.data.code != 2) {
        this.shoucangtype = !this.shoucangtype
      }

    },
    goitemlist(e) {
      this.$router.push({
        path: `/news/${e}.html`,
        query: { id: e }
      });
    },
    gotijiaopinglun() {
      if(this.uid == null || this.uid == undefined || this.uid == ''){
        window.location.href = `${this.$domain}/?ct=wap&ac=login&goto=https:/shouyou/${this.id}.html`;
      }
      const params = {
        ct: 'app2021',
        ac: 'gameinfo _pinglun',
        id: this.id,
        sign: this.textToHash,
        t: this.t,
        uid: this.uid,
        content: this.pinglunmessage
      };
      this.$axios.get('', { params }).then(response => {
        if (response.data.code == 1) {
          this.$nextTick(() => {
            this.page2 = 1
            this.pinglunlist22()
            this.pinglunshow = false
          })
        }
      });
    },

    async zan(e) {
      const params = {
        ct: 'app',
        ac: 'pinglun_zan',
        id: e,
        sign: this.textToHash,
        t: this.t,
        uid: this.uid,
      };
      this.$axios.get('', { params }).then(response => {
        if (response.data.code == 1) {
          this.$nextTick(() => {
            this.page2 = 1
            this.pinglunlist22()
          })
        }
      });


    },
    onLoad() {
      setTimeout(() => {
        if (this.page <= this.yinyuankang.max_p) {
          this.page++;
        } else {
          this.finished = true;
        }
      }, 500);
    },
    onLoad2() {
      setTimeout(() => {
        if (this.page2 <= this.pinglunlist.max_p) {
          this.page2++;
          this.pinglunlist22()
        } else {
          this.finished = true;
        }
      }, 500);
    },
    onLoad3() {
      setTimeout(() => {
        if (this.page3 <= this.youxikaifu.max_p) {
          this.page3++;
          this.youxikaifulist()
        } else {
          this.finished = true;
        }
      }, 500);
    },
    async pinglunlist22() {
      const params = {
        ct: 'app2021',
        ac: 'gameinfo_pllist',
        id: this.id,
        p: this.page2,
        sign: this.textToHash,
        t: this.t,
        uid: this.uid,
      };
      const response = await this.$axios.get('', { params });
      if (this.page2 == 1) {
        this.pinglunlist = response.data;
      } else {
        this.pinglunlist.data = this.pinglunlist.data.concat(response.data.data);
        this.loading = false;
      }
    },
    async youxikaifulist() {
      const params = {
        ct: 'app',
        ac: 'game_info2',
        id: this.id,
        p: this.page3
      };
      const response = await this.$axios.get('', { params });
      if (this.page3 == 1) {
        this.youxikaifu = response.data;
      } else {
        this.youxikaifu.data = this.youxikaifu.data.concat(response.data.data);
        this.loading = false;
      }
    },
    goBack() {
      this.$router.back();
    },
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
    },
    showImage(e) {
      this.$showImageModal(e)
    },
    checkOverflow() {
      const description = this.$el.querySelector('.description');
      if (description.scrollHeight > description.clientHeight) {
        this.isTruncated = true;
      } else {
        this.isTruncated = false;
      }
    },
    goheader(index) {
      this.activeIndex = index
      // if(index==1){
      //   this.$nuxt.$router.push({
      //     path: '/heshzhuti/heishenhuaindex',
      //     query: { id: this.yinyuankang.shequ_id }
      //   });
      // }
    },
    getCookie(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(';').shift();
      return '';
    },
  }
}
</script>
<style>
body {
  background: #F7F8FA !important;
  font-size: 1rem;
}</style>
<style scoped>


.xuanzhongdian {
  width: 28px;
  height: 2px;
  margin: 0 auto;
  background: #17181A;
  position: absolute;
  left: 2%;
  bottom: 25%;
}

.active {
  font-weight: bold;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 8px;
}

.description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: max-height 0.3s ease;
  max-height: 4.5em;
  /* 3行文本的最大高度 */
}

.description.show-more {
  display: block;
  -webkit-line-clamp: unset;
  max-height: none;
  /* 展开后的高度不限制 */
}

.toggle-button {
  display: flex;
  align-items: center;
  margin: 12px auto;
  cursor: pointer;
}

.toggle-text {
  font-size: 12px;
  font-weight: 500;
  color: #AEB0B3;
}

.toggle-icon {
  width: 12px;
  height: 12px;
  margin-left: 4px;
}

.zixun-cell {
  display: flex;
  align-items: center;
}

.truncate {
  color: #47494D;
  font-size: .9375rem;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hengxian {
  width: 56px;
  height: 2px;
  background: #2E3033;
  border-radius: 25px;
}

.gameindexfooter {
  position: fixed;
  bottom: 0;
  z-index: 9;
  background: #FFFFFF;
  padding: .3125rem .75rem;
  display: flex;
  width: 100%;
  align-items: center;
}

.xiazaiyouxi {
  width: 15.4375rem;
  height: 2.125rem;
  line-height: 2.125rem;
  background: #FF7700;
  border-radius: 1.5rem;
  font-weight: bold;
  color: #FFFFFF;
  font-size: .8125rem;
  text-align: center;
}

.taltas {
  height: 2.25rem;
  background: rgba(238, 238, 238, 1);
  border-radius: .375rem;
  line-height: 2.25rem;
  margin-bottom: .625rem;
  padding: 0px .625rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pinluntanchaung {
  z-index: 999;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
  display: flex;
  flex-direction: column;
  align-items: center;

}

.tijiao {
  background: linear-gradient(138deg, rgba(255, 182, 10, 1) 0%, rgba(246, 106, 5, 1) 100%);
  border-radius: .375rem;
  font-size: .875rem;
  text-align: center;
  height: 2.5rem;
  line-height: 2.5rem;
  color: #FFFFFF;
  padding: .2rem 2.5rem;
  margin: 1rem 0;

}

.xuanji {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 2px;
  justify-content: space-around;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  z-index: 99;
}

.weiz {
  text-align: center;
  justify-content: space-between;
  z-index: 99;
  width: 76px;
  color: #ffffff;
  font-size: 10px;


}

.gameactive {
  background: #FFFFFF;
  padding: 5px 8px;
  width: 60px;
  border-radius: 12px 12px 12px 12px;
  color: #2E3033;
  font-size: 10px;
}

.swipe-container {
    height: 14.55rem;
}

.swipe-item {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    margin: 0.75rem 0 0 0;
    /* 行间距 */
}

.item-icon {
    width: 3.75rem;
    height: 3.75rem;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
}

.item-content {
    margin-left: 0.75rem;
    flex: 1;
}

.item-name {
    color: #1a1a1a;
    font-size: 0.875rem;
    font-weight: bold;
}

.item-tags {
    display: flex;
    align-items: center;
    margin: 0.25rem 0;
}

.item-tag {
    color: #aeb0b3;
    font-weight: 500;
    font-size: 0.8125rem;
    margin-right: 0.9375rem;
}

.item-point {
    display: flex;
    align-items: flex-end;
    margin-top: 0.25rem;
}
.point-icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

.point-value {
    color: #ff7500;
    font-size: 0.75rem;
}
/deep/.van-swipe__indicators{
  display: none;
}
    .scroll-container {  
  display: flex;  
  align-items: center;  
  overflow-x: auto;  
  white-space: nowrap;  
  scrollbar-width: none;  
  scroll-snap-type: x mandatory;  
  -ms-overflow-style: none;  
  margin: 16px 0;  
} 
    .scroll-item {  
  margin-right: 12px;  
  width: 100%;  
  scroll-snap-align: start;  
}
    video::-webkit-media-controls-timeline {
        display: none;
    }
    video::-webkit-media-controls-current-time-display{
        display: none;            
    }
    video::-webkit-media-controls-time-remaining-display {
        display: none;            
    }
    video::-webkit-media-controls-mute-button {
        display: none;            
    }
    video::-webkit-media-controls-volume-slider {
        display: none;            
    }
 
    video::-webkit-media-controls-fullscreen-button {
        display: none;
    }
    /deep/.vans-cell {
  background: none;
}
</style>